<template >
  <div id="activity-home">
    <div class="content">
      <div class="search_box">
        <ul class="search">
          <li class="left"
              @click="routerGo">
            <span>{{city.substr(0,2)}}</span>
            <i class="iconfont icon-icon_down1"></i>
          </li>
          <li class="right">
            <i class="iconfont icon-a-icon_pressed"></i>
            <input type="text"
                   title="搜索"
                   v-model="value"
                   @click="search"
                   placeholder="搜索你喜欢的活动" />
          </li>
        </ul>
      </div>
      <div class="banner">
        <van-swipe indicator-color="#F15353" :autoplay="3000">
          <van-swipe-item v-for="(item,i) in goodsInfo" :key='i' style="">
              <div  @click="bannerTo(item)">
                <img  :src="item.thumb" />
              </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="sort" v-if="categories.length">
        <ul>
          <li class="item"
              v-for="(item,index) in categories"
              :key="index"
              @click="toSort(item)">
            <div class="img">
              <img :src="item.thumb">
            </div>
            <span class="calssify-title">{{item.calssify_title}}</span>
          </li>
        </ul>
      </div>
      <div class="hot-least" v-if="set && set.is_hot==1">
        <div class="hot-title">
          <span class="strong"><b>近期热门</b></span>
          <span class="all"
                @click="least">全部 <i class="fa fa-angle-right"></i></span>

        </div>
        <div class="image"
             ref="hotTab">
          <ul id="hotImage"
              ref='hotCon'>
            <li @click="toEnroll(obj)"
                v-for="(obj,index) in hot"
                :key="index"><img :src="obj.thumb">
                <p class="title">{{obj.title}}</p>
                <p class="cash-row">
                  <span class="cash" v-if="obj.cash>0.00"><b>{{$i18n.t('money')}}</b>{{obj.cash}}</span>
                  <span class="left" v-if="obj.cash<=0.00">免费</span>
                </p>
            </li>
          </ul>
        </div>
      </div>
      <div class="people-hot" v-if="set && set.is_discount==1">
        <div class="people-title">
          <span class="strong"><b>人气精选</b></span>
          <span class="all"
                @click="concentration">全部 <i class="fa fa-angle-right"></i></span>
        </div>
        <div class="people-image"
             ref="personTab">
          <ul class="content"
              ref="cont">
            <li class="list"
                @click="toEnroll(list)"
                v-for="(list,index) in discount"
                :key="index">
              <img :src="list.thumb">
              <p class="title">{{list.title}}</p>
              <p class="date">{{getDate(list.registration_time)}}- {{getDate(list.registration_end_time)}}</p>
            </li>
            <!-- <li class="check-more" @click="concentration">
              <span>查看全部</span>
              <span class="line"></span>
              <span>See More</span>
            </li> -->
          </ul>
        </div>
      </div>
      <div class="intoduce-you" v-if="set && set.is_recommand==1">
        <div class="title">
          <span class="strong"><b>为您推荐</b></span>
        </div>
        <div class="list"
             @click="toEnroll(item)"
             v-for="(item,index) in recommand"
             :key="index">
          <div class="list-row">
          <div class="list-image">
            <img :src="item.thumb"
                class="left">
            <span class="text default-end"
              v-if="item.count_apply == item.limit && (item.registration_time<=now&&now<item.registration_end_time)">已报满</span>
            <template v-else>
              <span class="text default-wait"
                    v-show="now<item.registration_time">待开始</span>
              <span class="text default"
                    v-show="item.registration_time<=now&&now<item.registration_end_time">报名中</span>
              <span class="text default-end"
                    v-show="now>=item.registration_end_time">已结束</span>
            </template>
            
          </div>
          <div class="list-info">
            <p  class="title">{{item.title}}</p>
            <p class="bottom-status"><span class="price"
                    v-if="item.cash>0.00"><b>{{$i18n.t('money')}}</b>{{item.cash}}</span><span class="cash"
                    v-if="item.cash<=0.00">免费</span></p>
            <p class="clock">{{timestampToTime(item.registration_time)}}开始</p>
          </div>
          </div>
          <div class="address"><i class="iconfont icon-zx_map_locate2"></i> {{item.city_name.substr(0,2)}}{{item.address}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import activity_homecontroller from './activity_homecontroller';
export default activity_homecontroller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-swipe__indicator {
  background-color: #FFFFFF ;
  opacity: 1;
  zoom: 1.2;
}
::v-deep .van-swipe__indicators {
  bottom: 18px;
}
#activity-home {

  .content {
    .search_box {
      .search {
        height: 2.75rem;
        line-height: 2.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.875rem;
        background-color: #fff;

        .text {
          font-size: 14px;
          color: #1c96fe;
        }

        .left {
          font-size: 15px;
          display: flex;

          i {
            color: #333333;
            font-size: 0.5rem;
          }

          span {
            display: block;
            max-width: 5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.75rem;
            font-weight: 500;
            color: #333333;
            margin-right: 0.2rem;
          }

          // i:last-child {
          //   font-size: 1.125rem;
          // }
        }

        .right {
          width: 65%;
          height: 1.875rem;
          background: #f5f5f5;
          display: flex;
          line-height: 1.875rem;
          border-radius: 1rem;
          padding: 0 0.625rem;
          font-size: 14px;

          i {
            font-size: 1.1rem;
            color: #999;
            margin-right: 0.2rem;
          }

          input {
            border: none;
            width: 100%;
          }
        }
      }
    }

    .banner {
      // margin: 1rem 0;
      width: 100%;
      background-color: white;
      .van-swipe-item {
        height: initial;
      }
      img,div{
        width: 100%;
        height: 100%;
      }
    }

    .sort {
      // margin: 1rem 0;
      // margin-bottom: 2rem;
      background-color: white;
      margin: 0.7rem 0.8rem;
      border-radius: 0.5rem;

      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0.5rem 0.2rem 0.7rem 0.2rem;

        .item {
          display: flex;
          width: 20%;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 5px 0;

          .img {
            width: 3rem;
            height: 3rem;
            background: #fff;
            border-radius: 50%;
            border: 0.125rem solid #fff;
            box-sizing: border-box;
            float: left;
            overflow: hidden;
            margin-bottom: 0.2rem;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .calssify-title {
            overflow:hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .hot-least {
      margin: 0.8rem 0;
      padding: 0 0.8rem;

      .hot-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .strong {
          font-size: 0.9rem;
          font-weight: bold;
          color: #00001C
        }

        .all {
          font-size: 0.85rem;
          font-weight: 400;
          color: #6E6E79;

          i {
            font-size: 1.15rem;
            color: #AAAAB3;
            vertical-align: bottom;
          }
        }
      }

      .image {
        width: 100%;
        margin-top: 0.8rem;
        overflow: hidden;
        background: white;
        padding: 0.7rem 0;
        border-radius: 0.5rem;

        ul {
          display: flex;
          // flex-wrap: wrap;
          padding: 0 0.8rem;

          li {
            margin-right: 0.8rem;

            .title {
              display: -webkit-box;
              overflow: hidden;
              white-space: normal;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 2;

              /* autoprefixer: off */
              -webkit-box-orient: vertical;
              text-align: left;
              font-size: 0.8rem;
              font-weight: bold;
              color: #00001C;
              margin: 0.3rem 0;
              width: 7.5rem;
            }

            .cash-row {
              text-align: left;
              font-weight: bold;
              color: #F15353;
              font-size: 0.8rem;
            }

            img {
              width: 7.5rem;
              height: 4.75rem;
              border-radius: 0.5rem;
            }
          }

          .check-more {
            width: 6rem;
            height: 3.9688rem;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin-right: 0;

            .line {
              width: 80%;
              height: 1px;
              background-color: #666;
              margin: 0.5rem 0;
            }
          }
        }
      }
    }

    .people-hot {
      padding: 0 0.8rem;
      margin: 15px 0;

      .people-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .strong {
          font-size: 0.9rem;
          font-weight: bold;
          color: #00001C
        }

        .all {
          font-size: 0.85rem;
          font-weight: 400;
          color: #6E6E79;
          vertical-align: bottom;

          i {
            font-size: 1.15rem;
            color: #AAAAB3;
          }
        }
      }

      .people-image {
        overflow: hidden;
        margin-top: 0.8rem;
        background: white;
        padding: 0.7rem 0;
        border-radius: 0.5rem;

        ul {
          display: flex;
          padding: 0 0.8rem;

          .list {
            // width: 6.25rem;
            margin-right: 0.8rem;

            .title {
              display: -webkit-box;
              overflow: hidden;
              white-space: normal;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 2;

              /* autoprefixer: off */
              -webkit-box-orient: vertical;
              text-align: left;
              font-size: 0.8rem;
              font-weight: bold;
              color: #00001C;
              margin: 0.2rem 0;
              width: 7.5rem;
            }

            .date {
              text-align: left;
              color: #6E6E79;
              font-size: 0.75rem;
              font-weight: 400;
            }

            img {
              width: 7.5rem;
              height: 4.75rem;
              border-radius: 0.5rem;
            }
          }

          .check-more {
            width: 6rem;
            height: 6rem;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;

            .line {
              width: 80%;
              height: 1px;
              background-color: #666;
              margin: 0.5rem 0;
            }
          }
        }
      }
    }

    .intoduce-you {
      margin-top: 0.9375rem;
      padding: 0 0.8rem;
      padding-bottom: 3.0625rem;

      .title {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;

        .strong {
          font-size: 0.9rem;
          font-weight: bold;
          color: #00001C
        }

        .all {
          font-size: 14px;
          color: #999;
        }
      }

      .list {
        padding: 0.8rem;
        margin: 0.75rem 0;
        background: white;
        border-radius: 0.5rem;

        .address {
          font-size: 0.75rem;
          font-weight: 400;
          color: #6E6E79;
          margin-top: 0.7rem;
          text-align: left;
          display: flex;
          align-items: center;

          .iconfont {
            margin-right: 0.3rem;
          }
        }

        .list-row {
          display: flex;
          border-bottom: 0.1rem dashed #D6D6DC;
          padding-bottom: 0.85rem;
        }

        .list-image {
          width: 8.9375rem;
          height: 5.5938rem;
          position: relative;

          .left {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }

          .text {
            position: absolute;
            left: 0;
            top: 0;
            width: 3rem;
            height: 1.3rem;
            border-radius: 0.5rem 0 0.5rem 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
          }
        }

        .list-info {
          display: flex;
          flex-direction: column;
          margin-left: 0.7rem;
          align-items: baseline;
          flex: 1;
          justify-content: space-between;

          .title {
            font-size: 0.85rem;
            font-weight: bold;
            color: #00001C;
            margin-top: 0.15rem;
            margin-bottom: 0;
          }

          .clock {
            font-size: 0.75rem;
            font-weight: 400;
            color: #00001C;
            margin-bottom: 0.15rem;
          }

          p:first-child {
            margin-top: 0;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 2;

            /* autoprefixer: off */
            -webkit-box-orient: vertical;
            text-align: left;
          }

          .bottom-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 0.95rem;
            font-weight: bold;
            color: #F15353;
          }
        }
      }
    }
  }

  .green {
    background-color: rgba(59, 179, 93, 0.2);
    color: #3bb35d !important;
  }

  .yellow {
    background-color: rgba(255, 177, 38, 0.2);
    color: #ffb126 !important;
  }

  .red {
    background-color: rgba(255, 49, 38, 0.2);
    color: #ff3126 !important;
  }

  .default {
    background-color: rgba(59, 179, 93, 0.8);
    color: #fff;
  }

  .default-end {
    background-color: rgb(0, 0, 0, 0.5);
    color: #fff;
  }
  
  .default-wait {
    background: rgba(249, 109, 32, 0.7);
    color: #fff;
  }
}
</style>
